<template>
  <div class="root">
    <div class="divBox">
      <div class="content-container">
        <div class="cardBody">
          <span class="header">创建项目</span>
          <!-- <span class="createTips" style="margin-left: 10px">{{ this.form.creatorId }} {{ this.form.createdTime }}
            创建</span>
          <span class="updateTips">{{ this.form.updatedId }} {{ this.form.updatedTime }} 更新</span> -->

          <el-divider></el-divider>
          <div class="outer20 flex-col">
            <span class="info5">1&nbsp;填写项目基本信息</span>
          </div>
          <div class="outer21 flex-col" @click="toChangePage">
            <span class="word9">2&nbsp;上传项目业主资料</span>
          </div>
          <div class="changeLine"></div>
          <button
            style="
              margin-top: 0px;
              margin-bottom: 20px;
              width: 119px;
              height: 36px;
            "
            class="normal-white-btn"
            @click="toMethodManager"
          >
            选择方法学
          </button>
          <el-input
            v-model="form.name"
            size="medium"
            placeholder="左侧按钮选择方法学"
            style="width: 350px; margin-left: 16px"
            disabled
          >
          </el-input>
          <br />
          <br />
          <img src="@/assets/icon/icon_plant.png" alt="" class="icon" />
          <span class="asset-little-title">项目信息</span>
          <br />
          <br />
          <div class="right">
            <el-row>
              <el-col :span="12">
                <div
                  style="margin-right: 15px; padding: 0 0 0 0"
                  class="selectbox-root"
                >
                  <span class="selectbox-hint" style="width: 80px"
                    >项目<span style="color: red">*</span></span
                  >
                  <div class="selectbox-deliver" />
                  <el-input
                    size="medium"
                    class="selectbox-input"
                    v-model="form.projectName"
                    placeholder="输入项目名称"
                    clearable
                  />
                </div>
              </el-col>
              <el-col :span="12">
                <div style="padding: 0 0 0 0" class="selectbox-root">
                  <span class="selectbox-hint" style="width: 120px"
                    >业主名称<span style="color: red">*</span></span
                  >
                  <div class="selectbox-deliver" />
                  <el-autocomplete
                    v-model="form.ownerName"
                    size="medium"
                    style="width: 80%"
                    :fetch-suggestions="querySearchAsync"
                    placeholder="请输入内容"
                    @select="handleSelect"
                  ></el-autocomplete>
                </div>
              </el-col>
            </el-row>
            <div style="clear: both; height: 40px"></div>
            <el-row>
              <el-col :span="8">
                <div style="padding: 0 0 0 0" class="selectbox-root">
                  <span class="selectbox-hint" style="width: 70px"
                    >国家<span style="color: red">*</span></span
                  >
                  <div class="selectbox-deliver" />
                  <el-cascader
                    placeholder="全部"
                    class="selectbox-input"
                    v-model="form.country"
                    :options="countryList"
                    @change="changeCity"
                    clearable
                    size="medium"
                  >
                  </el-cascader>
                </div>
              </el-col>
              <el-col :span="8">
                <div
                  style="margin-left: 17px; padding: 0 0 0 0"
                  class="selectbox-root"
                >
                  <span class="selectbox-hint" style="width: 80px"
                    >省份<span style="color: red">*</span></span
                  >
                  <div class="selectbox-deliver" />
                  <el-cascader
                    style=""
                    placeholder="全部"
                    class="selectbox-input"
                    v-model="form.province"
                    :options="provinceList"
                    @change="changeProvince"
                    clearable
                    size="medium"
                    @clear="clearCity"
                  >
                  </el-cascader>
                </div>
              </el-col>
              <el-col :span="8">
                <div
                  style="margin-left: 17px; padding: 0 0 0 0"
                  class="selectbox-root"
                >
                  <span class="selectbox-hint" style="width: 130px"
                    >市/县/郡<span style="color: red">*</span></span
                  >
                  <div class="selectbox-deliver" />
                  <el-cascader
                    style="width: 85%"
                    placeholder="全部"
                    class="selectbox-input"
                    v-model="form.city"
                    :options="nowCityList"
                    @change="changeCity"
                    clearable
                    size="medium"
                  >
                  </el-cascader>
                </div>
              </el-col>
            </el-row>

            <div style="clear: both; height: 40px"></div>
            <el-row>
              <el-col :span="12">
                <div style="margin-right: 15px" class="selectbox-root">
                  <span class="selectbox-hint" style="width: 100px"
                    >项目地点<span style="color: red">*</span></span
                  >
                  <div class="selectbox-deliver" />
                  <el-input
                    size="medium"
                    style="width: 85%"
                    class="selectbox-input"
                    v-model="form.address"
                    placeholder="请输入项目地点"
                    clearable
                  />
                </div>
              </el-col>
              <el-col :span="12">
                <div class="selectbox-root">
                  <span class="selectbox-hint" style="width: 200px"
                    >资产开发机构名称<span style="color: red">*</span></span
                  >
                  <div class="selectbox-deliver" />
                  <el-autocomplete
                    v-model="form.assetsDevelopAgency"
                    size="medium"
                    style="width: 85%"
                    :fetch-suggestions="querySearchAsync"
                    placeholder="请输入内容"
                    @select="handleSelect"
                  ></el-autocomplete>
                </div>
              </el-col>
              <!-- <hr> -->
              <div style="clear: both; height: 20px"></div>
              <img
                src="@/assets/icon/icon_plant.png"
                alt=""
                class="icon"
                style="position: relative; right: 30px"
              />
              <span
                class="asset-little-title"
                style="position: relative; right: 30px"
                >项目介绍</span
              >
              <!-- <hr> -->
              <div style="clear: both; height: 20px"></div>
              <el-col :span="24">
                <div
                  class="basic-div"
                  style="height: 189px; padding: 20px 20px 20px 20px"
                >
                  <textarea
                    v-model="form.projectIntroduction"
                    placeholder="输入项目介绍"
                    name=""
                    id=""
                    cols="30"
                    rows="10"
                    class="projectInfo"
                  ></textarea>
                </div>
              </el-col>
            </el-row>
            <div style="clear: both; height: 20px"></div>
            <button
              style="width: 96px; float: right"
              class="light-green-btn"
              @click="toNext"
            >
              下一步
            </button>
            <button
              style="width: 96px; float: right; margin-right: 20px"
              class="light-green-btn"
              @click="onSave"
            >
              保存
            </button>
            <!-- <button style="width: 96px; float: right; margin-right: 20px" :class="isReturn()" v-if="showCancel"
              @click="onCancel">
              上一步
            </button> -->
          </div>
        </div>
        <!-- 选择方法学 -->
        <el-dialog
          title="方法学列表"
          :visible.sync="dialogTableVisible"
          width="75%"
        >
          <el-row>
            <el-col :span="8">
              <div style="" class="selectbox-root">
                <a class="selectbox-hint" style="width: 95px">核证标准</a>
                <div class="selectbox-deliver" />
                <el-cascader
                  style="width: 85%"
                  size="medium"
                  placeholder="全部"
                  class="selectbox-input"
                  v-model="selectedCertification"
                  :options="Certification"
                  clearable
                  @change="update"
                >
                </el-cascader>
              </div>
            </el-col>
            <el-col :span="8">
              <div style="margin-left: 16px" class="selectbox-root">
                <a class="selectbox-hint" style="width: 60px">领域</a>
                <div class="selectbox-deliver" />
                <el-cascader
                  style="width: 80%"
                  placeholder="全部"
                  size="medium"
                  class="selectbox-input"
                  v-model="selectedAreaDict"
                  :options="projectAreaDict"
                  clearable
                  @change="update"
                >
                </el-cascader>
              </div>
            </el-col>
            <el-col :span="8">
              <div style="margin-left: 16px" class="selectbox-root">
                <a class="selectbox-hint" style="width: 90px">行业</a>
                <div class="selectbox-deliver" />
                <el-cascader
                  style="width: 80%"
                  size="medium"
                  placeholder="全部"
                  class="selectbox-input"
                  v-model="selectedIndustry"
                  :options="IndustryList"
                  clearable
                  @change="update"
                >
                </el-cascader>
              </div>
            </el-col>
          </el-row>
          <div style="width: 400px"></div>
          <el-row style="margin-top: 10px">
            <el-col :span="16">
              <div style="margin-right: 10px" class="selectbox-root">
                <a class="selectbox-hint" style="width: 120px">方法学搜索</a>
                <div class="selectbox-deliver" />
                <el-input
                  class="selectbox-input"
                  @keyup.enter.native="searchEnter"
                  v-model="searchKeyWord"
                  style="width: 80%"
                  size="medium"
                  placeholder="输入名称、编号、关键词等"
                  clearable
                />
              </div>
            </el-col>
            <el-col :span="8">
              <button
                class="light-green-btn"
                @click="onClickSearch"
                style="position: relative; top: 3px"
              >
                查询
              </button>
            </el-col>
          </el-row>
          <el-table :data="methodList" style="width: 100%" stripe>
            <el-table-column min-width="10"></el-table-column>
            <el-table-column
              label="编号"
              align="left"
              prop="methodCode"
              min-width="80"
            >
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              align="left"
              prop="name"
              label="名称"
              min-width="230"
            />
            <el-table-column
              align="left"
              prop="industryCodeName"
              label="行业"
              min-width="80"
            />
            <el-table-column
              align="left"
              prop="certificationCriteriaName"
              label="核证标准"
              min-width="80"
            />
            <!-- <el-table-column align="left" prop="statusName" label="状态" min-width="60" /> -->
            <el-table-column label="操作" min-width="150" align="center">
              <template slot-scope="scope">
                <a class="list-blue-text" @click="pickMethod(scope.row)"
                  >选择</a
                >
              </template>
            </el-table-column>
          </el-table>
          <div style="margin-top: 30px; margin-bottom: 10px" class="pageBox">
            <div style="flex-grow: 1" />
            <a style="margin: auto" class="pageBox-total-num"
              >共{{ total }}条</a
            >
            <el-pagination
              style="margin: auto"
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="methodCurrent"
              :page-size="methodPageSize"
              :page-count="pageCount"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { loadMethodList } from "@/api/carbonAssetApi";
import { openUrlInNewWindow } from "@/libs/OpenHelper";
import { getProvinceDict } from "@/config/dictHelper";
import { getCountryDict } from "@/config/dictHelper";
import { getCertificationCriteriaDict } from "@/config/dictHelper";
import { getBusinessDict } from "@/config/dictHelper";
import { getProjectAreaDict } from "@/config/dictHelper";
import { getMethodologyDict } from "@/config/dictHelper";
import { getCityDict } from "@/api/carbonAssetApi";
import { number } from "echarts/lib/export";
import { log } from "console";
import { async } from "q";
export default {
  name: "projectADD",
  data() {
    return {
      searchKeyWord: "",
      state: "",
      projectAreaDict: [], //项目领域字典
      selectedCertification: "", //被选中的标准
      selectedIndustry: "", //被选中的行业
      selectedAreaDict: "", //被选中的领域
      Certification: [], //核证标准字典
      IndustryList: [], //行业字典
      carbonMethodologyId: "",
      provinceList: [], //省份
      cityList: [], //城市
      nowCityList: [], //当前选中省份对应的城市
      dialogTableVisible: false, //是否显示方法学弹框
      methodList: [], //方法学列表
      countryList: [], //国家
      submit: false,
      isCreate: true, //是创建还是修改？
      // OwnerNameOptions: [
      //   {
      //     value: "北京我爱我家地产有限公司",
      //     label: "北京我爱我家地产有限公司",
      //   },
      //   {
      //     value: "上海我爱我家地产有限公司",
      //     label: "上海我爱我家地产有限公司",
      //   },
      //   {
      //     value: "河南我爱我家地产有限公司",
      //     label: "河南我爱我家地产有限公司",
      //   },
      // ], //搜索业主名称的提示框
      form: {
        id: "",
        name: "",
        carbonMethodology: "",
        projectName: "",
        ownerName: "",
        country: "",
        province: "",
        city: "",
        address: "",
        assetsDevelopAgency: "",
        projectIntroduction: "",
        projectStatus: "", //已创建
        projectType: "",
        approvalDate: "",
      },
      fromPath: "",
      list: [],
      next: false,
      showCancel: true,
      pageCount: 0,
      total: 0,
      states: [],
      methodPageSize: 10,
      methodCurrent: 1,
    };
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.fromPath = from.path; //获取上一级路由的路径
    });
  },
  methods: {
    loadAll() {
      return [
        {
          value: "北京我爱我家地产有限公司",
          label: "北京我爱我家地产有限公司",
        },
        {
          value: "上海我爱我家地产有限公司",
          label: "上海我爱我家地产有限公司",
        },
        {
          value: "河南我爱我家地产有限公司",
          label: "河南我爱我家地产有限公司",
        },
      ];
    },

    isReturn() {
      if (this.fromPath == "/carbon/projectCreate/ownerAdd") {
        this.showCancel = false;
        return "normal-white-btn-no";
      } else {
        return "normal-white-btn";
      }
    },
    //跳转到方法学管理
    toMethodManager() {
      this.dialogTableVisible = true;
      this.getMethodList(1);
    },
    handleCurrentChange(val) {
      this.methodCurrent = val;
      this.getMethodList(val);
    },
    handleSizeChange(val) {
      this.methodPageSize = val;
      this.getMethodList(1);
    },
    update() {
      const data = {
        asc: true,
        size: this.methodPageSize,
        searchKey: this.searchKeyWord,
        fieldCode: this.selectedAreaDict[0],
        industryCode: this.selectedIndustry[0],
        certificationCriteria: this.selectedCertification[0],
        current: this.methodCurrent,
        status: "0450000002",
      };
      loadMethodList(data)
        .then((res) => {
          this.methodList = res.data.records;
          this.total = res.data.total;
          this.methodCurrent = res.data.current;
          this.pageCount = Math.ceil(
            parseInt(res.data.total) / this.methodPageSize
          );
          this.methodList.map((v) => {
            for (var i in v) {
              v[i] = v[i] ? v[i] : "--";
              if (v[i] == " ") {
                v[i] = "--";
              }
            }
          });
        })
        .catch((errror) => {});
    },
    querySearchAsync(queryString, cb) {
      var restaurants = this.states;
      var results = queryString
        ? restaurants.filter(this.createStateFilter(queryString))
        : restaurants;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 1000 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return (
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    handleSelect(item) {
      console.log(item);
    },
    toOnerPage() {
      this.$router.push({
        path: "/carbon/projectCreate/ownerAdd",
        query: { id: this.form.id },
      });
    },
    pickMethod(row) {
      this.form.name = row.name;
      this.form.carbonMethodology = row.dictCode;
      this.dialogTableVisible = false;
    },
    //搜索业主的提示框
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        if (this.OwnerNameOptions) {
          this.loading = false;
        }
      }
    },
    onSave() {
      sessionStorage.setItem("projectAdd", JSON.stringify(this.form));
      if (sessionStorage.getItem("projectAdd")) {
        this.$message.success("保存成功");
      } else {
        this.$message.error("保存失败");
      }
    },
    onCancel() {
      if (this.fromPath == "/carbon/projectCreate/ownerAdd") {
      } else {
        this.$router.go(-1);
      }
    },
    // onSubmit() {

    //   // if (this.onSave()) {
    //     this.$router.push({
    //       path: "/carbon/ownerAdd",
    //       query: { id: this.form.id },
    //     });
    //   // }

    // },
    onClickSearch() {
      const data = {
        asc: true,
        size: this.pageSize,
        searchKey: this.searchKeyWord,
        fieldCode: this.selectedAreaDict[0],
        industryCode: this.selectedIndustry[0],
        certificationCriteria: this.selectedCertification[0],
        status: "0450000002",
      };
      loadMethodList(data)
        .then((res) => {
          this.methodList = res.data.records;
          this.total = res.data.total;
          this.methodCurrent = res.data.current;
          this.pageCount = Math.ceil(
            parseInt(res.data.total) / this.methodPageSize
          );
          this.methodList.map((v) => {
            //遍历表格数据
            for (var i in v) {
              v[i] = v[i] ? v[i] : "--";
              if (v[i] == " ") {
                v[i] = "--";
              }
            }
          });
        })
        .catch((errror) => {});
    },
    getMethodList(val) {
      const data = {
        asc: true,
        size: this.methodPageSize,
        current: val,
        searchKey: this.searchKeyWord,
        fieldCode: this.selectedAreaDict[0],
        industryCode: this.selectedIndustry[0],
        certificationCriteria: this.selectedCertification[0],
        status: "0450000002",
        // status: 1,
      };
      loadMethodList(data)
        .then((res) => {
          this.methodList = res.data.records;
          this.total = res.data.total;
          this.methodCurrent = res.data.current;
          this.pageCount = Math.ceil(
            parseInt(res.data.total) / this.methodPageSize
          );
          this.methodList.map((v) => {
            //遍历表格数据
            for (var i in v) {
              v[i] = v[i] ? v[i] : "--";
              if (v[i] == " ") {
                v[i] = "--";
              }
            }
          });
        })
        .catch((errror) => {});
    },
    // 格式化省字典
    formatProvince(data) {
      data.map((v) => {
        let CertificationItem = {
          value: "",
          label: "",
        };
        if (v.label == "全部") {
          CertificationItem.value = "";
          CertificationItem.label = v.name;
        } else {
          CertificationItem.value = v.value;
          CertificationItem.label = v.name;
        }
        this.provinceList.push(CertificationItem);
      });
    },
    toNext() {
      sessionStorage.setItem("projectAdd", JSON.stringify(this.form));
      if (sessionStorage.getItem("projectAdd")) {
      } else {
        this.$message.error("保存失败");
      }
      this.$router.push({
        path: "/carbon/projectCreate/ownerAdd",
        query: { form: this.form },
      });
    },
    /**
     * 作者:
     * 时间: 2022-06-20 11:07:39
     * 功能: 切换页面
     */
    toChangePage() {
      sessionStorage.setItem("projectAdd", JSON.stringify(this.form));
      this.$router.push({
        path: "/carbon/projectCreate/ownerAdd",
        query: { form: this.form },
      });
    },
    clearCity() {
      this.nowCityList = [];
    },
    changeCity() {
      if (this.form.city) {
        this.form.city = this.form.city[0];
      }
    },
    changeProvince() {
      this.nowCityList.length = 0;
      if (this.form.province) {
        if (Array.isArray(this.form.province)) {
          this.form.province = this.form.province[0];
        }
        console.log("city");
        console.log(this.form);
        var provinceCode = this.form.province.slice(8, 10);
        console.log(this.cityList);
        for (var i in this.cityList) {
          if (i == provinceCode) {
            this.list = this.cityList[i];
          }
        }
        if (this.list) {
          for (var j in this.list) {
            this.nowCityList.push({ value: "012015" + j, label: this.list[j] });
          }
        }
      }
    },
    /*
     *@Description: 回车搜索
     *@MethodAuthor: liuboting
     *@Date: 2022-05-22 16:19:09
     */
    searchEnter() {
      this.onClickSearch();
    },
    // 格式化市字典
    formatCity(data) {
      data.map((v) => {
        let CertificationItem = {
          value: "",
          label: "",
        };
        if (v.label == "全部") {
          CertificationItem.value = "";
          CertificationItem.label = v.name;
        } else {
          CertificationItem.value = v.value;
          CertificationItem.label = v.name;
        }
        this.cityList.push(CertificationItem);
      });
    },
    // 格式化国家字典
    formatCountry(data) {
      data.map((v) => {
        let CertificationItem = {
          value: "",
          label: "",
        };
        if (v.label == "全部") {
          CertificationItem.value = "";
          CertificationItem.label = v.name;
        } else {
          CertificationItem.value = v.value;
          CertificationItem.label = v.name;
        }
        this.countryList.push(CertificationItem);
      });
    },
    loadProject() {
      var form = sessionStorage.getItem("projectAdd");
      if (form) {
        var myForm = JSON.parse(form);
        this.form = myForm;
        if (this.form.province) {
          this.changeProvince();
        }
      }

      var data = this.$route.query;
      var method = getMethodologyDict(this.$store);
      if (data.code) {
        this.form.carbonMethodology = data.code;
      }
      method.map((v) => {
        if (v.value == this.form.carbonMethodology) {
          this.form.name = v.name;
        }
      });
    },
    loadCityDict() {
      getCityDict().then((res) => {
        this.cityList = res.data;
        this.loadProject();
      });
    },
    // 格式化标准字典
    formatStatus(data) {
      data.map((v) => {
        let CertificationItem = {
          label: "",
        };
        if (v.name == "全部") {
          CertificationItem.label = v.name;
        } else {
          CertificationItem.value = v.value;
          CertificationItem.label = v.name;
        }
        this.Certification.push(CertificationItem);
      });
    },
    // 格式化行业字典
    formatIndustry(data) {
      data.map((v) => {
        let CertificationItem = {
          label: "",
        };
        if (v.name == "全部") {
          CertificationItem.label = v.name;
        } else {
          CertificationItem.value = v.value;
          CertificationItem.label = v.name;
        }
        this.IndustryList.push(CertificationItem);
      });
    },
    // 格式化领域字典
    formatArea(data) {
      data.map((v) => {
        let CertificationItem = {
          label: "",
        };
        if (v.name == "全部") {
          CertificationItem.label = v.name;
        } else {
          CertificationItem.value = v.value;
          CertificationItem.label = v.name;
        }
        this.projectAreaDict.push(CertificationItem);
      });
    },
  },
  mounted() {
    let data = this.$route.query;
    if (data) {
      this.form.name = data.methodName;
      this.form.carbonMethodology = data.code;
    }
    this.formatProvince(getProvinceDict(this.$store));
    this.formatCountry(getCountryDict(this.$store));
    this.formatStatus(getCertificationCriteriaDict(this.$store));
    this.formatIndustry(getBusinessDict(this.$store));
    this.formatArea(getProjectAreaDict(this.$store));
    this.loadCityDict();
    this.form.country = this.countryList[0].value;
    this.states = this.loadAll();
    // this.list = this.states.map(item => {
    //   return { value: item, label: item };
    // });
    // console.log(this.methodList);
  },
};
</script>

<style lang="scss" scoped>
.root {
  background: #f2f5f7;
}

.divBox {
  margin: 20px;
  background: #ffffff;
  box-shadow: 0px 2px 8px 0px #eaf0f3;
  border-radius: 8px;
}

// .container {
//   margin: 10px 0px 20px 0px;
//   display: flex;
//   flex-direction: row;
// }

.cardBody {
  margin: 30px 30px 30px 30px;
}

.header {
  overflow-wrap: break-word;
  color: rgba(36, 167, 118, 1);
  font-size: 18px;
  font-family: PingFangSC-Medium;
}

.createTips {
  color: rgba(128, 142, 165, 1);
  font-size: 13px;
  float: right;
}

.updateTips {
  overflow-wrap: break-word;
  color: rgba(128, 142, 165, 1);
  font-size: 13px;
  float: right;
  margin-right: 20px;
}

.el-divider {
  margin-top: 20px;
}

.outer20 {
  background-color: rgba(38, 181, 129, 1);
  height: 38px;
  width: 194px;
  cursor: pointer;
  float: left;
  margin-top: 20px;

  .info5 {
    width: 123px;
    height: 14px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
    line-height: 14px;
    // display: block;
    margin: 20px 0 0 35px;
    position: relative;
    top: 12px;
  }
}

.basic-div {
  // width: 933px;
  height: 174px;
  border-radius: 6px;
  border: 1px solid #e3e7eb;
  // margin-left: 30px;
  // margin-top: 10px;
}

.outer21 {
  background-color: rgba(38, 181, 129, 0.5);
  height: 38px;
  width: 194px;
  float: left;
  cursor: pointer;
  margin-left: 20px;
  margin-top: 20px;

  .word9 {
    width: 126px;
    height: 14px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
    line-height: 14px;
    // display: block;
    margin: 20px 0 0 33px;
    position: relative;
    top: 12px;
  }
}

.changeLine {
  clear: both;
  height: 40px;
}

.icon {
  height: 16px;
  width: 22px;
}

.asset-little-title {
  width: 64px;
  height: 16px;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #424c5c;
  line-height: 16px;
  margin-left: 10px;
}

.country-span {
  width: 200px;
}

// .left {
//   float: left;
//   // width: 10px;
//   height: auto;
// }

.right {
  // float: left;
  width: 100%;
  margin-left: 30px;
}

.pic2 {
  height: 180px;
  width: 2px;
  position: absolute;
  top: 335px;
  left: 80px;
}

.pic3 {
  height: 210px;
  width: 2px;
  position: absolute;
  top: 550px;
  left: 80px;
}

.projectInfo {
  height: 100%;
  width: 100%;
  border-radius: 6px;
  border: 0px solid;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  line-height: 21px;
  text-align: justify;
}

/* 按钮样式 */
</style>
